<template>
  <div>
    <el-card shadow="never" :style="{height: documentHeight + 'px', overflow:'auto' }">
      <!--     <div style="float: left">-->
      <el-form :inline="true">
        <el-form-item label="触发时间" label-width="65px" prop="datasourceName">
          <el-date-picker
            v-model="queryform.time"
            type="datetimerange"
            range-separator="至"
            size="mini"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="任务名称" label-width="65px" prop="datasourceName">
          <el-select filterable style="width: 90%" size="mini" v-model="queryform.jobId"
                     clearable placeholder="请选择任务名称">
            <el-option
              v-for="item in addsourceoptions"
              :key="item.id"
              :label="item.jobName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="执行结果" label-width="65px" prop="datasourceName">
          <el-select filterable style="width: 90%" size="mini" v-model="queryform.status"
                     clearable placeholder="请选择执行结果">
            <el-option
              v-for="item in statusOption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="queryDataSource(true)">查询</el-button>
        </el-form-item>
      </el-form>
      <!--       </div>-->
      <div style="width: 100%;margin-top: -40px">
        <table-change @change="tableSize = $event" style="float: right;" />
        <el-table
          :height="documentHeight-181"
          :size="tableSize"
          :cell-style="({ column })=>column.type==='index'&&'color:#999999'"
          :data="tableData"
          row-key="id"
          style="width: 100%;">
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="execId"
            align="center"
            label="执行ID"
            :show-overflow-tooltip="true"
            min-width="255">
          </el-table-column>
          <el-table-column
            align="center"
            prop="jobName"
            label="任务名称"
            min-width="180">
          </el-table-column>
          <el-table-column
            prop="server"
            label="执行节点"
            align="center"
            min-width="150">
          </el-table-column>
          <el-table-column
            align="center"
            prop="jobId"
            label="任务ID"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="triggerTime"
            align="center"
            label="触发时间"
            min-width="200">
          </el-table-column>
          <el-table-column
            prop="startTime"
            label="开始时间"
            header-align="center"
            align="center"
            min-width="180">
          </el-table-column>
          <el-table-column
            prop="overTime"
            label="结束时间"
            align="center"
            min-width="180">
          </el-table-column>
          <el-table-column
            prop="elapsedTime"
            label="总用时(秒)"
            align="center"
            min-width="80">
          </el-table-column>

          <el-table-column
            header-align="center"
            align="center"
            label="执行结果"
            min-width="180">
            <template v-slot="{row}">
              <span v-if="row.status ==='1'">已经启动</span>
              <span v-if="row.status ==='2'">执行成功</span>
              <span v-if="row.status ==='3'" style="color: #FC5A5A">启动异常</span>
              <span v-if="row.status ==='4'" style="color: #FC5A5A">执行异常 </span>
              <span v-if="row.status ==='5'">停止 </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            header-align="center"
            align="center"
            label="操作"
            min-width="120">
            <template slot-scope="scope">
              <el-link :click-change-color="true" :underline="false" style="margin-left: 5px"
                       @click="querylog(scope.row)" type="primary">查看日志
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 5px;float: right"
          small
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size=pagesize
          :page-sizes="[10, 20, 30, 50]"
          layout="total,prev, sizes,pager, next,jumper"
          :total=total>
        </el-pagination>
      </div>

    </el-card>
    <el-dialog @close="isLogShow=false" width="90%" title="执行日志" style="z-index:1000000;margin-top: -50px"
               :close-on-click-modal=false :visible.sync="isLogShow">
      <div :style="{ height: lastHeight-100 + 'px'}" style="overflow: auto">
        <el-input type="textarea" :rows="30" readonly v-model="log"></el-input>
<!--        <span style="color: #fff" v-html="log"></span></div>-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import defaultValue from "./components/dialogdata";
import Print from "@/util/print";
import axios from "axios";
import Crontab from "./components/crontab/index.vue";
// import datatree from './components/dataDevelopTree.vue'
// import treehead from './components/treehead.vue'
// import containers from './components/graphContainers.vue'
// import nodeContainers from './components/nodeContainers.vue'
export default {
  name: "demo1",
  components: { Crontab },
  data() {
    return {
      log: "",
      value: true,
      jobIdOption: [],
      statusOption: [
        {
          label: "已经启动",
          value: "1"
        },
        {
          label: "执行成功",
          value: "2"
        },
        {
          label: "启动异常",
          value: "3"
        },
        {
          label: "执行异常",
          value: "4"
        },
        {
          label: "停止",
          value: "5"
        }
      ],
      queryform: {
        time: [],
        status: "",
        jobId: ""
      },
      isLogShow: false,
      tableSize: "",
      tableData: [],
      dataSource: "",
      dialogtitle: "新增数据源",
      dialogFormVisible: false,
      addsourceoptions: [],
      addsourceform: {
        jobCron: "",
        jobDesc: "",
        flowInfoId: "",
        executorTimeout: "",
        executorFailRetryCount: "",
        subJobId: ""
      },
      fromrules: {
        // jobCron: { required: true, message: "请输入", trigger: "blur" },
        flowInfoId: { required: true, message: "请选择", trigger: "change" },
        jobDesc: { required: true, message: "请输入", trigger: "blur" },
        executorTimeout: { required: true, message: "请输入", trigger: "blur" },
        executorFailRetryCount: { required: true, message: "请输入", trigger: "blur" },
        subJobId: { required: true, message: "请输入", trigger: "blur" }
      },
      mysqlshow: false,
      hbaseinputshow: false,
      mongodbinputshow: true,
      currentPage: 1,
      pagesize: 30,
      initialaddsourceform: {},
      total: 0,
      runTest: false
    };
  },
  methods: {
    fill(data) {
      this.addsourceform.jobCron = data;
    },
    queryDataSource(tag) {
      if (tag) {
        this.currentPage = 1;
      }
      let querydata = {
        pageNum: this.currentPage,
        pageSize: this.pagesize,
        param: {
          jobId: this.queryform.jobId,
          status: this.queryform.status,
          triggerTimeBegin: this.queryform.time[0],
          triggerTimeEnd: this.queryform.time[1]
        }
      };
      this.queryform.time[0] ? querydata.param.triggerTimeBegin = this.queryform.time[0] : querydata.param.triggerTimeBegin = "";
      this.queryform.time[1] ? querydata.param.triggerTimeEnd = this.queryform.time[1] : querydata.param.triggerTimeEnd = "";
      this.$http.post("/log/findLogPage", querydata).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });

    },
    querylog(row) {
      let querydata = {
        execId: row.execId,
        triggerDate: row.triggerDate,
        reload: true,
        server: row.server,
        flowId: row.flowId,
        triggerTime: row.triggerTime
      };
      this.$http.post("/executor/getLog", querydata).then((res) => {
        // this.log = res.data.msg.replace(/\n/g, "<br>");
        this.log = res.data.msg;
      }).finally(() => {

        this.isLogShow = true;
      });
    },
    getDic() {
      this.$http.post("/job/findJobList").then((res) => {
        this.addsourceoptions = res.data;
      });
    },

    handleSizeChange(val) {
      this.pagesize = val;
      this.queryDataSource();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryDataSource();
    }
  },
  computed: {
    documentHeight() {
      return this.$store.getters.documentHeight;
    },
    lastHeight() {
      return this.documentHeight - 220;
    }
  },
  created() {
    this.queryDataSource();
    this.getDic();
    this.initialaddsourceform = Object.assign({}, this.addsourceform);

  }

};
</script>

<style scoped>
::v-deep .el-card__body {
    padding-top: 5px;
}
</style>
